.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #242f42;
  font-size: 22px;
  box-shadow: 0 1px 5px #333333;
  z-index: 2;
  .logo {
    height: 60px;
    width: 100px;
    float: left;
    img {
      height: 80%;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      background-color: #FFF;
      border-radius: 50%;
      box-shadow: 0 0 5px #ff4949;
    }
  }
  .user {
    position: absolute;
    color: #BFCBD9;
    right: 20px;
    cursor: pointer;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      position: relative;
      top: -2px;
    }
  }
  .title {
    position: relative;
    img {
      border-radius: 50%;
      width: 128px;
      height: 128px;
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 13px;
      color: #bfcbd9;
      cursor: pointer;
      &:hover {
        color: #20a0ff;
      }
    }
  }
  .change {
    color: #fff;
    background-color: #50bfff;
    border: solid 1px #50bfff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover, &:focus {
      background: #73ccff;
      border-color: #73ccff;
      color: #fff;
    }
  }
}
